<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$title}} - Interactive eBook</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --reading-bg: #fdfcf9;
            --reading-text: #1a1a1a;
            --reading-text-light: #3a3a3a;
            --reading-text-muted: #6b6b6b;
            --sidebar-bg: #2c2c34;
            --sidebar-text: #e8e8e8;
            --sidebar-hover: #3a3a46;
            --sidebar-active: #4a4a5a;
            --primary-color: #5b7c99;
            --primary-hover: #4a6a85;
            --accent-color: #7fa99b;
            --success-color: #6ba368;
            --warning-color: #d99555;
            --danger-color: #c15555;
            --code-bg: #f5f5f0;
            --code-border: #e0e0d8;
            --code-text: #2a2a2a;
            --inline-code-bg: #eef0f2;
            --inline-code-color: #5b7c99;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
            --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.7;
            color: var(--reading-text);
            background: #e8e6e1;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .ebook-container {
            display: flex;
            min-height: 100vh;
            max-width: 1800px;
            margin: 0 auto;
            background: var(--reading-bg);
            box-shadow: var(--shadow-xl);
        }

        /* Sidebar Styles */
        .sidebar {
            width: 320px;
            background: var(--sidebar-bg);
            color: var(--sidebar-text);
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        }

        .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .sidebar-header {
            padding: 2rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }

        .book-cover {
            width: 100px;
            height: 140px;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 6px;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            font-size: 3rem;
            color: white;
        }

        .book-info h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            color: var(--sidebar-text);
            line-height: 1.4;
        }

        .book-info p {
            font-size: 0.8rem;
            color: var(--reading-text-muted);
            margin: 0;
            opacity: 0.7;
        }

        .sidebar-nav {
            padding: 1rem 0;
        }

        .nav-section {
            margin-bottom: 1.5rem;
        }

        .nav-section-title {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--reading-text-muted);
            padding: 0.5rem 1.5rem;
            margin: 0;
            opacity: 0.8;
        }

        .nav-item {
            display: block;
            padding: 0.7rem 1.5rem;
            color: var(--sidebar-text);
            text-decoration: none;
            font-size: 0.85rem;
            border-left: 3px solid transparent;
            transition: all 0.2s ease;
            opacity: 0.85;
            cursor: pointer;
        }

        .nav-item:hover {
            background: var(--sidebar-hover);
            border-left-color: var(--accent-color);
            opacity: 1;
        }

        .nav-item.active {
            background: var(--sidebar-active);
            border-left-color: var(--accent-color);
            color: var(--accent-color);
            opacity: 1;
            font-weight: 500;
        }

        .nav-item i {
            width: 18px;
            margin-right: 0.75rem;
            opacity: 0.8;
        }

        .nav-item-h1 {
            font-weight: 600;
            padding-left: 1.5rem;
        }

        .nav-item-h2 {
            padding-left: 2.5rem;
            font-size: 0.8rem;
        }

        .nav-item-h3 {
            padding-left: 3.5rem;
            font-size: 0.75rem;
            opacity: 0.7;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 0;
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--reading-bg);
            min-height: 100vh;
        }

        .main-content.sidebar-open {
            margin-left: 320px;
        }

        /* Top Navigation */
        .top-nav {
            background: rgba(253, 252, 249, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--code-border);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .sidebar-toggle {
            background: none;
            border: none;
            color: var(--reading-text);
            font-size: 1.25rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .sidebar-toggle:hover {
            background: var(--code-bg);
            color: var(--primary-color);
        }

        .breadcrumb {
            font-size: 0.85rem;
            color: var(--reading-text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .breadcrumb i {
            color: var(--primary-color);
        }

        .reading-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .theme-toggle, .font-size-btn {
            background: var(--reading-bg);
            border: 1px solid var(--code-border);
            color: var(--reading-text);
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .theme-toggle:hover, .font-size-btn:hover {
            background: var(--code-bg);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .font-size-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* Content Area */
        .content-wrapper {
            max-width: 800px;
            margin: 0 auto;
            padding: 3rem 2rem 5rem;
            font-family: 'Lora', Georgia, serif;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* Typography */
        .content-wrapper h1 {
            color: var(--reading-text);
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0 0 2rem 0;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--code-border);
            letter-spacing: -0.02em;
            line-height: 1.2;
            scroll-margin-top: 80px;
        }

        .content-wrapper h2 {
            color: var(--reading-text);
            font-family: 'Inter', sans-serif;
            font-size: 1.85rem;
            font-weight: 600;
            margin: 3rem 0 1.25rem 0;
            letter-spacing: -0.01em;
            line-height: 1.3;
            scroll-margin-top: 80px;
        }

        .content-wrapper h3 {
            color: var(--reading-text);
            font-family: 'Inter', sans-serif;
            font-size: 1.4rem;
            font-weight: 600;
            margin: 2.5rem 0 1rem 0;
            line-height: 1.4;
            scroll-margin-top: 80px;
        }

        .content-wrapper h4 {
            color: var(--reading-text);
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            font-weight: 600;
            margin: 2rem 0 0.75rem 0;
            scroll-margin-top: 80px;
        }

        .content-wrapper h5, .content-wrapper h6 {
            color: var(--reading-text);
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            margin: 1.5rem 0 0.75rem 0;
            scroll-margin-top: 80px;
        }

        .content-wrapper h5 { font-size: 1.1rem; }
        .content-wrapper h6 { font-size: 1rem; }

        .content-wrapper p {
            margin-bottom: 1.5rem;
            color: var(--reading-text-light);
            line-height: 1.8;
        }

        .content-wrapper strong {
            color: var(--reading-text);
            font-weight: 600;
        }

        /* Enhanced Lists */
        .content-wrapper ul, .content-wrapper ol {
            margin: 1.5rem 0;
            padding-left: 0;
        }

        .content-wrapper li {
            margin-bottom: 0.75rem;
            padding-left: 2rem;
            position: relative;
            color: var(--reading-text-light);
            line-height: 1.7;
        }

        .content-wrapper ul li::before {
            content: '●';
            position: absolute;
            left: 0.5rem;
            color: var(--accent-color);
            font-weight: 600;
            font-size: 0.7rem;
        }

        .content-wrapper ol {
            counter-reset: list-counter;
        }

        .content-wrapper ol li {
            counter-increment: list-counter;
        }

        .content-wrapper ol li::before {
            content: counter(list-counter);
            position: absolute;
            left: 0;
            background: var(--accent-color);
            color: white;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
        }

        /* Code Blocks */
        .content-wrapper pre {
            background: var(--code-bg);
            border: 1px solid var(--code-border);
            border-left: 3px solid var(--primary-color);
            border-radius: 8px;
            padding: 1.25rem;
            margin: 2rem 0;
            overflow-x: auto;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.875rem;
            line-height: 1.6;
            color: var(--code-text);
            box-shadow: var(--shadow-sm);
        }

        .content-wrapper pre::-webkit-scrollbar {
            height: 8px;
        }

        .content-wrapper pre::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
        }

        .content-wrapper pre::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 4px;
        }

        .content-wrapper code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
            background: var(--inline-code-bg);
            color: var(--inline-code-color);
            padding: 0.15rem 0.4rem;
            border-radius: 3px;
            font-weight: 500;
        }

        .content-wrapper pre code {
            background: none;
            padding: 0;
            color: var(--code-text);
            font-weight: 400;
        }

        /* Blockquotes */
        .content-wrapper blockquote {
            margin: 2.5rem 0;
            padding: 1.5rem 2rem;
            border-left: 4px solid var(--accent-color);
            background: rgba(127, 169, 155, 0.08);
            border-radius: 8px;
            font-style: italic;
            box-shadow: var(--shadow-sm);
            line-height: 1.7;
        }

        .content-wrapper blockquote p {
            margin: 0;
            color: var(--reading-text-light);
        }

        /* Enhanced Tables */
        .content-wrapper table {
            width: 100%;
            border-collapse: collapse;
            background: var(--reading-bg);
            margin: 2.5rem 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--code-border);
        }

        .content-wrapper th {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            font-weight: 600;
            padding: 1rem 1.25rem;
            text-align: left;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 0.03em;
        }

        .content-wrapper td {
            padding: 0.9rem 1.25rem;
            border-bottom: 1px solid var(--code-border);
            color: var(--reading-text-light);
            font-size: 0.95rem;
        }

        .content-wrapper tr:nth-child(even) td {
            background: rgba(0, 0, 0, 0.02);
        }

        .content-wrapper tr:hover td {
            background: rgba(91, 124, 153, 0.05);
        }

        /* Links */
        .content-wrapper a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
            border-bottom: 1px solid transparent;
        }

        .content-wrapper a:hover {
            color: var(--primary-hover);
            border-bottom-color: var(--primary-color);
        }

        /* Images */
        .content-wrapper img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 2.5rem auto;
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
        }

        /* Progress Bar */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            z-index: 9999;
            transition: width 0.1s ease;
        }

        /* Dark Mode */
        .dark-mode {
            --reading-bg: #1a1a1a;
            --reading-text: #e0e0e0;
            --reading-text-light: #c0c0c0;
            --reading-text-muted: #888888;
            --sidebar-bg: #0f1419;
            --sidebar-text: #e0e0e0;
            --sidebar-hover: #1a1f26;
            --sidebar-active: #242a33;
            --code-bg: #242424;
            --code-border: #3a3a3a;
            --code-text: #d4d4d4;
            --inline-code-bg: #2a2a2a;
            --inline-code-color: #7fa99b;
        }

        .dark-mode .top-nav {
            background: rgba(26, 26, 26, 0.95);
        }

        /* Font Size Classes */
        .font-small .content-wrapper { font-size: 1rem; }
        .font-medium .content-wrapper { font-size: 1.1rem; }
        .font-large .content-wrapper { font-size: 1.25rem; }

        /* Scroll to Top Button */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--primary-color);
            color: white;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            transition: all 0.3s ease;
            z-index: 999;
        }

        .scroll-top:hover {
            background: var(--primary-hover);
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.3);
        }

        .scroll-top.visible {
            display: flex;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .main-content.sidebar-open {
                margin-left: 0;
            }
            
            .sidebar.open ~ .main-content::after {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
        }

        @media (max-width: 768px) {
            .content-wrapper {
                padding: 2rem 1.25rem 3rem;
                font-size: 1rem;
            }
            
            .top-nav {
                padding: 0.75rem 1rem;
            }
            
            .content-wrapper h1 { font-size: 2rem; }
            .content-wrapper h2 { font-size: 1.5rem; }
            .content-wrapper h3 { font-size: 1.25rem; }
            
            .reading-controls {
                gap: 0.35rem;
            }
            
            .theme-toggle, .font-size-btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }
            
            .breadcrumb span {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .content-wrapper {
                padding: 1.5rem 1rem 2rem;
            }
            
            .sidebar {
                width: 280px;
            }
        }

        @media print {
            .sidebar, .top-nav, .scroll-top, .reading-progress {
                display: none !important;
            }
            
            .main-content {
                margin-left: 0 !important;
            }
            
            .ebook-container {
                background: white;
                box-shadow: none;
            }
            
            .content-wrapper {
                max-width: none;
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <div class="reading-progress"></div>
    
    <div class="ebook-container">
        <!-- Sidebar -->
        <nav class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="book-cover">
                    <i class="fas fa-book"></i>
                </div>
                <div class="book-info">
                    <h3>{{$title}}</h3>
                    <p>by {{$author}}</p>
                </div>
            </div>
            
            <div class="sidebar-nav" id="sidebar-nav">
                <div class="nav-section">
                    <h4 class="nav-section-title">Table of Contents</h4>
                    <div id="toc-container">
                        <!-- Table of contents will be generated here -->
                    </div>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="main-content" id="main-content">
            <header class="top-nav">
                <div class="nav-controls">
                    <button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle sidebar">
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="breadcrumb">
                        <i class="fas fa-book-open"></i>
                        <span>{{$title}}</span>
                    </div>
                </div>
                
                <div class="reading-controls">
                    <button class="font-size-btn" onclick="changeFontSize('small')" aria-label="Small font">A-</button>
                    <button class="font-size-btn active" onclick="changeFontSize('medium')" aria-label="Medium font">A</button>
                    <button class="font-size-btn" onclick="changeFontSize('large')" aria-label="Large font">A+</button>
                    <button class="theme-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
            </header>
            
            <div class="content-wrapper" id="content">
                {{$body}}
            </div>
        </main>
    </div>

    <button class="scroll-top" onclick="scrollToTop()" aria-label="Scroll to top">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script>
        // State management
        let sidebarOpen = window.innerWidth > 1024;
        let currentFontSize = 'medium';

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            initializeApp();
        });

        function initializeApp() {
            generateTableOfContents();
            addIdsToHeadings();
            loadPreferences();
            setupEventListeners();
            updateActiveNavigation();
            
            if (window.innerWidth > 1024) {
                toggleSidebar();
            }
        }

        // Generate table of contents from headings
        function generateTableOfContents() {
            const content = document.getElementById('content');
            const tocContainer = document.getElementById('toc-container');
            const headings = content.querySelectorAll('h1, h2, h3');
            
            if (headings.length === 0) return;
            
            headings.forEach((heading, index) => {
                const level = heading.tagName.toLowerCase();
                const text = heading.textContent;
                const id = 'heading-' + index;
                
                // Add ID to heading for navigation
                heading.id = id;
                
                // Create nav item
                const navItem = document.createElement('a');
                navItem.href = '#' + id;
                navItem.className = 'nav-item nav-item-' + level;
                navItem.textContent = text;
                navItem.setAttribute('data-target', id);
                
                // Add icon based on level
                const icon = document.createElement('i');
                if (level === 'h1') {
                    icon.className = 'fas fa-book-open';
                } else if (level === 'h2') {
                    icon.className = 'fas fa-chevron-right';
                } else {
                    icon.className = 'fas fa-angle-right';
                }
                
                navItem.insertBefore(icon, navItem.firstChild);
                tocContainer.appendChild(navItem);
            });
        }

        // Add IDs to all headings
        function addIdsToHeadings() {
            const content = document.getElementById('content');
            const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
            
            headings.forEach((heading, index) => {
                if (!heading.id) {
                    heading.id = 'heading-' + index;
                }
            });
        }

        // Sidebar functionality
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            
            sidebar.classList.toggle('open');
            mainContent.classList.toggle('sidebar-open');
            sidebarOpen = sidebar.classList.contains('open');
        }

        // Reading progress
        function updateReadingProgress() {
            const windowHeight = window.innerHeight;
            const documentHeight = document.documentElement.scrollHeight;
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
            
            const progressBar = document.querySelector('.reading-progress');
            progressBar.style.width = Math.min(Math.max(scrollPercent, 0), 100) + '%';
        }

        // Scroll to top
        function scrollToTop() {
            window.scrollTo({ 
                top: 0, 
                behavior: 'smooth' 
            });
        }

        // Show/hide scroll to top button
        function toggleScrollTopButton() {
            const scrollButton = document.querySelector('.scroll-top');
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > 500) {
                scrollButton.classList.add('visible');
            } else {
                scrollButton.classList.remove('visible');
            }
        }

        // Dark mode toggle
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
            const icon = document.querySelector('.theme-toggle i');
            
            if (document.body.classList.contains('dark-mode')) {
                icon.className = 'fas fa-sun';
                localStorage.setItem('darkMode', 'enabled');
            } else {
                icon.className = 'fas fa-moon';
                localStorage.setItem('darkMode', 'disabled');
            }
        }

        // Font size adjustment
        function changeFontSize(size) {
            const body = document.body;
            body.classList.remove('font-small', 'font-medium', 'font-large');
            body.classList.add('font-' + size);
            currentFontSize = size;
            
            // Update button states
            document.querySelectorAll('.font-size-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            localStorage.setItem('fontSize', size);
        }

        // Active navigation highlighting
        function updateActiveNavigation() {
            const navItems = document.querySelectorAll('.nav-item[data-target]');
            const headings = document.querySelectorAll('[id^="heading-"]');
            
            let currentHeading = '';
            const scrollPosition = window.pageYOffset + 150;
            
            headings.forEach(heading => {
                const headingTop = heading.offsetTop;
                
                if (scrollPosition >= headingTop) {
                    currentHeading = heading.id;
                }
            });
            
            navItems.forEach(item => {
                item.classList.remove('active');
                if (item.getAttribute('data-target') === currentHeading) {
                    item.classList.add('active');
                }
            });
        }

        // Load saved preferences
        function loadPreferences() {
            // Dark mode
            if (localStorage.getItem('darkMode') === 'enabled') {
                document.body.classList.add('dark-mode');
                document.querySelector('.theme-toggle i').className = 'fas fa-sun';
            }
            
            // Font size
            const savedFontSize = localStorage.getItem('fontSize') || 'medium';
            const body = document.body;
            body.classList.add('font-' + savedFontSize);
            
            // Update active font button
            document.querySelectorAll('.font-size-btn').forEach((btn, index) => {
                btn.classList.remove('active');
                const sizes = ['small', 'medium', 'large'];
                if (sizes[index] === savedFontSize) {
                    btn.classList.add('active');
                }
            });
        }

        // Setup event listeners
        function setupEventListeners() {
            // Scroll events
            let scrollTimeout;
            window.addEventListener('scroll', function() {
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(() => {
                    updateReadingProgress();
                    toggleScrollTopButton();
                    updateActiveNavigation();
                }, 10);
            });
            
            // Navigation click handlers
            document.addEventListener('click', function(e) {
                if (e.target.closest('.nav-item[data-target]')) {
                    e.preventDefault();
                    const navItem = e.target.closest('.nav-item[data-target]');
                    const targetId = navItem.getAttribute('data-target');
                    const targetElement = document.getElementById(targetId);
                    
                    if (targetElement) {
                        targetElement.scrollIntoView({ 
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                    
                    // Close sidebar on mobile after navigation
                    if (window.innerWidth <= 1024) {
                        const sidebar = document.getElementById('sidebar');
                        const mainContent = document.getElementById('main-content');
                        sidebar.classList.remove('open');
                        mainContent.classList.remove('sidebar-open');
                    }
                }
            });
            
            // Close sidebar when clicking outside on mobile
            document.addEventListener('click', function(e) {
                if (window.innerWidth <= 1024) {
                    const sidebar = document.getElementById('sidebar');
                    const mainContent = document.getElementById('main-content');
                    const sidebarToggle = document.querySelector('.sidebar-toggle');
                    
                    if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target) && sidebar.classList.contains('open')) {
                        sidebar.classList.remove('open');
                        mainContent.classList.remove('sidebar-open');
                    }
                }
            });
            
            // Handle window resize
            let resizeTimeout;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(() => {
                    const sidebar = document.getElementById('sidebar');
                    const mainContent = document.getElementById('main-content');
                    
                    if (window.innerWidth > 1024 && !sidebar.classList.contains('open')) {
                        sidebar.classList.add('open');
                        mainContent.classList.add('sidebar-open');
                    }
                }, 250);
            });
        }

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // Toggle sidebar with 'S' key
            if (e.key === 's' || e.key === 'S') {
                if (!e.target.matches('input, textarea')) {
                    e.preventDefault();
                    toggleSidebar();
                }
            }
            
            // Toggle dark mode with 'D' key
            if (e.key === 'd' || e.key === 'D') {
                if (!e.target.matches('input, textarea')) {
                    e.preventDefault();
                    toggleDarkMode();
                }
            }
        });
    </script>
</body>
</html>
